<template>
	<view>
		<custom-header :title="title" @addListItem="addListItem" :type="APPTYPE.ADD" />
		<u-sticky bgColor="#fff" class="sticky" :customNavHeight="height">
			<u-tabs 
				:list="list"
				@change="switchTab" 
				:current="current" 
				:scrollable="false"
				:activeStyle="{
					fontWeight: 500,
					color: '#171717'
				}"
				:inactiveStyle="{
					color:'#C6C6C6',
					fontWeight: 400
				}"
			></u-tabs>
			<view class="search">
				<u--input v-model="basicForm.materialName" placeholder="请输入物料名称" shape="circle" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399" @blur="onSubmit"></u--input>
				<view class="btn-filter" @click.stop="handleFilter">
					<text>筛选</text>
					<u-icon v-if="!showFilter" name="arrow-down-fill" color="#B2B2B2"></u-icon>
					<u-icon v-else name="arrow-up-fill" color="#B2B2B2"></u-icon>
				</view>
			</view>
			<view v-show="showFilter">
				<u--form labelPosition="top" :model="basicForm" ref="queryForm" labelWidth="auto" :labelStyle="{
					fontSize: '14px',
					color: '#B2B2B2',
					lineHight: '20px'
				}">
					<u-form-item label="物料大类" prop="provisionBroad">
						<h-dropdown class="w-100" keyName="categoryName" placeholder="请选择物料大类"
							:api="api.queryProvisionBroadList" v-model="basicForm.provisionBroad" dataKey="result"
							border="surround" suffixIcon="arrow-down" :suffixIconStyle="{ color: '#B2B2B2' }"
							@change="exportWarehouseChange" />
					</u-form-item>
					<u-form-item label="物料小类" prop="provisionSmall">
						<h-dropdown class="w-100" keyName="categoryName" ref="provisionSmall" placeholder="请选择物料小类"
							:columns="smallList" v-model="basicForm.provisionSmall" dataKey="result" border="surround"
							suffixIcon="arrow-down" :suffixIconStyle="{ color: '#B2B2B2' }" />
					</u-form-item>
				</u--form>
				<view class="btns">
					<u-button :disabled="isSubmit" type="primary" :plain="true" text="重置" @click="resetForm"></u-button>
					<u-button :disabled="isSubmit" type="primary" text="确定" @click="onSubmit"></u-button>
				</view>
			</view>
		</u-sticky>
		<!-- #ifdef APP-PLUS -->
		<view style="height: 40px;"></view>
		<!-- #endif -->
		<view class="page"
			:style="!isData ? 'display:flex;width: 100vw;height:100vh;align-items:center;justify-content: center;' : ''">
			<template v-if="isData">
				<view class="list" v-for="(item, index) in dataList" :key="index" @click="go(item, index)">
					<view class="item">
						<view class="option">
							<custom-select-person style="width: 100%" disabled v-model="item.handlerId" placeholder="请选择申请人"
								border="none"></custom-select-person>
							<!-- {{ item.handlerId }} -->
						</view>
						<view class="option">
							<view class="lf">物料编码</view>
							<view class="rl">{{ item.materialBill }}</view>
						</view>
						<view class="option">
							<view class="lf">物料名称</view>
							<view class="rl">{{ item.materialName }}</view>
						</view>
						<view class="option">
							<view class="lf">物料大类</view>
							<view class="rl">{{ item.provisionBroad_dictText }}</view>
						</view>
						<view class="option">
							<view class="lf">物料小类</view>
							<view class="rl">{{ item.provisionSmall_dictText }}</view>
						</view>
						<view class="option">
							<view class="lf">参考价格(元)</view>
							<view class="rl">{{ item.referencePrice }}</view>
						</view>
						<view class="option">
							<view class="lf">审核状态</view>
							<view class="rl">{{ item.auditStatus_dictText }}</view>
						</view>
						<view class="wrap">
							<template v-if="item.auditStatus === 2">
								<view class="btn w100" @click.stop="counterTrial(item)"
									v-show="$hasPerm('erpMaterial:counterTrial')">
									<text>反审</text>
								</view>
								<!-- <view class="btn" @click.stop="editCreditRating(item)"
									v-show="$hasPerm('erpPurchaseSupplier:audits')">
									<text>授信</text>
								</view> -->
							</template>

							<template v-if="item.auditStatus === 1">
								<view class="btn" @click.stop="onAudit(item)" v-show="$hasPerm('erpMaterial:audit')">
									<text>审核</text>
								</view>
								<view class="btn" @click.stop="onReject(item)" v-show="$hasPerm('erpMaterial:audit')">
									<text>驳回</text>
								</view>
							</template>
						</view>
					</view>
				</view>
				<!-- 加载更多显示 -->
				<view class=""><u-loadmore :status="statusLoadmore" /></view>
			</template>
			<view v-else>
				<u-empty mode="data" icon="/static/empty/data.png">
				</u-empty>
			</view>
			<view style="height: 100rpx;"></view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { list, counterTrial, audit, overrule, queryProvisionBroadList, queryProvisionSmallList } from '@/api/purchase/ErpMaterial.js';
import APPTYPE from '@/config/appType.js';
export default {
	props: {},
	components: {},
	data() {
		return {
			api: {
				queryProvisionBroadList,
			},
			APPTYPE: APPTYPE,
			title: '物料管理',
			list: [{
				name: '已审核',
				type: 2,
				badge: {
					value: 0,
				},
				disabled: false
			},
			{
				name: '审核中',
				type: 1,
				badge: {
					value: 0,
				},
				disabled: false
			},
			{
				name: '待提交',
				type: 0,
				badge: {
					value: 0,
				},
				disabled: false
			}
			],
			height: 37,
			safeArea: 0,
			showFilter: false,
			isSubmit: false,
			basicForm: {
				materialName: '',
				provisionBroad: '',
				provisionSmall: '',
			},
			page: {
				pageNo: 1,
				pageSize: 10,
			},
			auditStatus: 2,
			dataList: [], // 列表
			isData: true, // 判断是否有数据  true 代表有 false 代表无
			statusLoadmore: 'loadmore', // 通过status设置组件的状态，加载前值为loadmore，加载中为loading，没有数据为nomore
			current: 0,
			loading: false,
			smallList: [],
		}
	},
	created() {
		uni.getSystemInfo({
			success(e) {
				uni.setStorageSync('getSystemInfo', e);
			}
		})
		this.safeArea = uni.getStorageSync('getSystemInfo').safeArea.top
		this.height = this.safeArea + 37
		this.getList()
		this.getTotla()
	},
	methods: {
		exportWarehouseChange(id) {
			this.smallList = []
			this.$set(this.basicForm, 'provisionSmall', '')
			if (id) {
				this.findProvisionSmallList(id)
			}
			this.$nextTick(() => {
				this.$refs.provisionSmall.loadData()
			})
		},
		findProvisionSmallList(value) {
			const parentId = value
			queryProvisionSmallList({
				parentId
			}).then((res) => {
				if (res.success) {
					const data = res.result.map((item) => {
						return {
							id: item.id,
							categoryName: item.categoryName
						}
					})
					this.smallList = [data]
				} else {
					this.$u.toast(res.message)
				}
			})
		},
		getTotla() {
			const self = this;
			self.list.forEach(item => {
				self.getTotalList(item.type).then(res => {
					if (res.success) {
						item.badge.value = res.result.total;
					}
				})
			});
		},
		getList() {
			this.statusLoadmore = 'loading' // 加载中
			this.dieabledTabList()
			list({
				...this.basicForm,
				...this.page,
				column: 'createTime',
				order: 'desc',
				auditStatus: this.auditStatus
			}).then(res => {
				this.allowTabList()
				if (res.success) {
					if (this.auditStatus == 2) {
						this.list[0].badge.value = res.result.total
					} else if (this.auditStatus == 1) {
						this.list[1].badge.value = res.result.total
					} else {
						this.list[2].badge.value = res.result.total
					}
					// 判断首次加载是否有数据
					if (this.page.pageNo == 1) {
						if (res.result.records && res.result.records.length) {
							this.isData = true
						} else {
							this.isData = false
						}
					}
					if (res.result.records && res.result.records.length) {
						if (res.result.records.length >= 10) {
							this.statusLoadmore = 'loadmore'
						} else {
							this.statusLoadmore = 'nomore'
						}
					} else {
						this.statusLoadmore = 'nomore'
					}
					if (this.page.pageNo == 1) {
						this.dataList = res.result.records
					} else {
						this.dataList = this.dataList.concat(res.result.records)
					}
				}
			}).finally(err => {
				this.allowTabList()
			})
		},
		getTotalList(auditStatus) {
			return new Promise((resolve, reject) => {
				list({
					...this.page,
					auditStatus
				}).then(response => {
					resolve(response)
				}).catch(error => {
					reject(error)
				})
			})
		},
		switchTab(item) {
			if (this.statusLoadmore == 'loading') {
				return false
			}
			this.current = item.index;
			this.page.pageNo = 1
			this.auditStatus = item.type;
			this.dataList = []
			this.getList()
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 150,
			})
		},
		// 禁止切换tabList
		dieabledTabList () {
			this.list.map((item, index) => {
			 	if (index !== this.current) {
			 		item.disabled = true
					return item
			 	}
			})
		},
		allowTabList () {
			this.list.map((item) => {
				item.disabled = false
				return item
			})
		},
		
		
		handleFilter() {
			this.showFilter = !this.showFilter;
		},
		resetForm() {
			this.$refs.queryForm.resetFields()
			this.getList()
		},
		onSubmit() {
			this.page.pageNo = 1
			this.getList()
		},
		onReachBottom() {
			if (this.statusLoadmore == 'nomore') return false
			this.page.pageNo = ++this.page.pageNo;
			this.getList()
		},
		go(item, index) {
			let _url = '';
			if (item.auditStatus === 0) {
				_url = '/pages/purchase/ErpMaterialForm?formType=' + this.APPTYPE.EDIT + '&id=' + item.id
			} else {
				_url = '/pages/synergy/ErpMaterialListDetail?id=' + item.id
			}
			uni.navigateTo({
				url: _url
			})
		},
		addListItem(data) {
			uni.navigateTo({
				url: '/pages/purchase/ErpMaterialForm?formType=' + this.APPTYPE.ADD
			})
		},
		// 驳回
		onReject(item) {
			const that = this
			uni.showModal({
				content: '确定驳回吗',
				success: function (res) {
					if (res.confirm) {
						that.http(overrule, { id: item.id }, '该物料未通过审核！');
					}
				}
			});
		},
		// 审核
		onAudit(item) {
			const that = this
			uni.showModal({
				title: '是否确认审核1条数据？',
				content: '数据审核后将不可编辑、不可删除，如果需要编辑、删除，请先对数据进行反审核。',
				success: function (res) {
					if (res.confirm) {
						that.http(audit, { id: item.id }, '该物料通过审核！');
					}
				}
			});
		},
		// 反审
		counterTrial(item) {
			const that = this
			uni.showModal({
				content: '确定反审吗',
				success: function (res) {
					if (res.confirm) {
						that.http(counterTrial, { id: item.id }, '反审成功！');
					}
				}
			});
		},
		async http(url, params, message = '') {
			const that = this
			const response = await url(params)
			if (response.success) {
				that.$refs.uToast.show({
					message: message?message:response.message,
					type: 'default',
					complete() {
						that.getList()
						that.getTotla()
					}
				})
			}
		},
	}
}
</script>

<style scoped lang="scss">
@import url("@/assets/inputStyle.scss");

.sticky {
	padding: 20rpx;
}

.search {
	margin-top: 20rpx;
	display: flex;

	.btn-filter {
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		color: #7F7F7F;
	}

}

.btns {
	display: flex;
	align-items: center;
	z-index: 100;
	background-color: #ffffff;
	width: 100%;
	height: 52px;
	// box-shadow: 0 8px 50px #23232333;

	.u-button {
		width: 45%;
	}
}

.page {
	margin-top: 50px;
	padding: 0 20rpx 20rpx 20rpx;

	.list {
		border-radius: 10rpx;
		box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
		padding: 12rpx 20rpx 0rpx 20rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;

		.item {
			width: 100%;

			.option {
				margin-bottom: 8rpx;

				.lf {
					font-size: 14px;
				}
			}

			.wrap {
				margin-top: 16rpx;
				display: flex;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1E6FFF;
				border-top: 1rpx solid #E5E5E5;

				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 50%;
					height: 80rpx;
				}

				.btn:first-child {
					border-right: 1rpx solid #E5E5E5;
				}

				.w100 {
					width: 100%;

				}

				.w100:first-child {
					border: none;
				}
			}

		}

	}
}

.container {
	padding: 20px;
}

.reject_buttons {
	// position: fixed;
	// bottom: 0;
	// left: 0;
	// right: 0;
	padding: 24rpx 36rpx;
	display: flex;
	border-top: 2rpx solid #F2F2F2;
	z-index: 0;
	font-size: 17px;
	font-weight: 400;

	view {
		// width: 328rpx;
		width: 100%;
		height: 80rpx;
		border-radius: 5px;
		line-height: 80rpx;
		text-align: center;
	}

	.btn1 {
		// width: 168rpx;
		background: rgba(0, 0, 0, 0.05);
		color: rgba(0, 0, 0, 0.5);
		margin-right: 24rpx;
	}

	.btn2 {
		background: #1E6FFF;
		color: #FFFFFF;
	}
}
</style>